.real-population {
  width: 92.5%;
  height: 92px;
  padding: 32px 0;
  margin: 0 32px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  position: relative;

  &-left {
    width: 8px;
    height: 32px;
    background: #E28656;
    border-radius: 2px;
    margin-right: 16px;
  }

  &-center {
    font-size: 32px;
    font-weight: 400;
    color: #000000;
    line-height: 28px;
  }

  &-right {
    position: absolute;
    right: 0;

    &-num {
      font-size: 36px;
      font-weight: normal;
      color: #E28556;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

.key-population {
  width: 92.5%;
  height: 92px;
  padding: 32px 0;
  margin: 0 32px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  position: relative;

  &-left {
    width: 8px;
    height: 32px;
    background: #3CBDD0;
    border-radius: 2px;
    margin-right: 16px;
  }

  &-center {
    font-size: 32px;
    font-weight: 400;
    color: #000000;
    line-height: 28px;
  }

  &-right {
    position: absolute;
    right: 0;

    &-num {
      font-size: 36px;
      font-weight: normal;
      color: #E25656;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

/deep/.van-tabs--line .van-tabs__wrap {
  height: 44px;
  border-bottom: 1px solid #E5E5E5;

}

.population-total {
  width: 100%;
  height: 270px;
  padding: 32px;
  box-sizing: border-box;

  &-chart {
    width: 686px;
    height: 206px;
    padding: 48px 32px;
    background: rgba(91, 143, 249, 0.1);
    border-radius: 16px;
    box-sizing: border-box;

    &-top {
      font-size: 26px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.78);
      line-height: 24px;
      margin-bottom: 20px;

      &-left {
        margin-left: 2px;
      }

      &-right {
        float: right;
        margin-right: 2px;
      }
    }

    &-center {
      width: 100%;
      height: 16px;
      display: flex;
      margin-bottom: 20px;


      &-item1 {
        background: #37C2BB;
        border-radius: 12px 0px 0px 12px;
      }

      &-item2 {
        background: #5B8FF9;
        border-radius: 0px 12px 12px 0px;
      }
    }

    &-bottom {
      font-size: 28px;
      font-weight: normal;
      line-height: 28px;

      &-left {
        color: #37C2BB;
      }

      &-right {
        float: right;
        color: #5B8FF9;
      }
    }
  }
}

.key-population-box {
  display: flex;

  &-left {
    &-special {
      width: 326px;
      height: 274px;
      background: rgba(226, 133, 86, 0.1);
      border-radius: 16px;
      margin-left: 34px;
      margin-top: 32px;

      p {
        padding-top: 20px;
        font-size: 26px;
        color: rgba(0, 0, 0, 0.78);
        text-align: center;
      }
    }

    &-carefor {
      width: 328px;
      height: 190px;
      background: rgba(226, 86, 86, 0.1);
      border-radius: 16px;
      margin-top: 32px;
      margin-left: 32px;
      padding-top: 30px;
      box-sizing: border-box;

      div {
        display: flex;
        justify-content: space-between;
      }

      p {
        font-size: 26px;
        color: rgba(0, 0, 0, 0.78);
        text-align: center;
        padding-left: 32px;
      }

      p:last-child {
        font-size: 40px;
        color: #E25656;
        padding-right: 32px;
      }
    }
  }

  &-right {

    &-young {
      width: 326px;
      height: 498px;
      background: rgba(55, 194, 187, 0.1);
      border-radius: 16px;
      margin: 32px 0 0 32px;
      padding-top: 38px;
      box-sizing: border-box;

      &-chart {
        width: 326px;
        height: 300px;
      }

      &-text {
        font-size: 26px;
        color: rgba(0, 0, 0, 0.78);
        text-align: center;
      }
    }


  }
}

.network {
  display: flex;
  padding: 34px 0;
  margin: 0 32px;
  border-bottom: 1px solid #E5E5E5;

  &-text {
    font-size: 28px;
    font-weight: 400;
    color: #292A2D;
    line-height: 60px;
    margin-left: 48px;
    width: 90%;

    &-color1 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #E4AF5F;
      line-height: 60px;
      font-family: 'iconfont';
    }

    &-color2 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #E48C5F;
      line-height: 60px;
      font-family: 'iconfont';
    }

    &-color3 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #E25656;
      line-height: 60px;
      font-family: 'iconfont';
    }

    &-color4 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #1BCEC5;
      line-height: 60px;
      font-family: 'iconfont';
    }

    &-color5 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #3CBDD0;
      line-height: 60px;
      font-family: 'iconfont';
    }

    &-color6 {
      float: right;
      font-size: 32px;
      font-weight: bold;
      color: #4175DB;
      line-height: 60px;
      font-family: 'iconfont';
    }
  }
}

.build-top {
  display: flex;
  padding: 34px 32px;
  padding-bottom: 0;
  justify-content: space-around;

  &-left {
    margin-right: 32px;

    &-item1 {
      margin-bottom: 32px;
      position: relative;

      &-text {
        position: absolute;
        top: 32px;
        left: 32px;
        font-size: 32px;
        font-weight: 500;
        color: #3CBDD0;
        line-height: 28px;
      }

      &-num {
        position: absolute;
        top: 96px;
        left: 32px;
        font-size: 36px;
        font-weight: normal;
        color: #3ABDCF;
        line-height: 28px;
        font-family: 'iconfont';
      }
    }

    &-item2 {
      margin-bottom: 32px;
      position: relative;

      &-text {
        position: absolute;
        top: 32px;
        left: 32px;
        font-size: 32px;
        font-weight: 500;
        color: #1BCEC5;
        line-height: 28px;
      }

      &-num {
        position: absolute;
        top: 96px;
        left: 32px;
        font-size: 36px;
        font-weight: normal;
        color: #1BCEC5;
        line-height: 28px;
        font-family: 'iconfont';
      }
    }
  }

  &-right {
    position: relative;

    &-text {
      position: absolute;
      top: 32px;
      left: 32px;
      font-size: 32px;
      font-weight: 500;
      color: #3B71DA;
      line-height: 28px;
    }

    &-num {
      position: absolute;
      top: 96px;
      left: 32px;
      font-size: 36px;
      font-weight: normal;
      color: #3B71DA;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

.build-bottom {
  display: flex;
  padding: 0 32px;
  justify-content: space-around;

  &-right {
    margin-left: 32px;

    &-item1 {
      margin-bottom: 32px;
      position: relative;

      &-text {
        position: absolute;
        top: 32px;
        left: 32px;
        font-size: 32px;
        font-weight: 500;
        color: #3ABDCF;
        line-height: 28px;
      }

      &-num {
        position: absolute;
        top: 96px;
        left: 32px;
        font-size: 36px;
        font-weight: normal;
        color: #3ABDCF;
        line-height: 28px;
        font-family: 'iconfont';
      }
    }

    &-item2 {
      margin-bottom: 32px;
      position: relative;

      &-text {
        position: absolute;
        top: 32px;
        left: 32px;
        font-size: 32px;
        font-weight: 500;
        color: #E25656;
        line-height: 28px;
      }

      &-num {
        position: absolute;
        top: 96px;
        left: 32px;
        font-size: 36px;
        font-weight: normal;
        color: #E25656;
        line-height: 28px;
        font-family: 'iconfont';
      }
    }
  }

  &-left {
    position: relative;

    &-text {
      position: absolute;
      top: 32px;
      left: 32px;
      font-size: 32px;
      font-weight: 500;
      color: #E4AF5F;
      line-height: 28px;
    }

    &-num {
      position: absolute;
      top: 96px;
      left: 32px;
      font-size: 36px;
      font-weight: normal;
      color: #E4AF5F;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

.sociology-population {
  width: 92.5%;
  height: 92px;
  padding: 32px 0;
  margin: 0 32px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  position: relative;

  &-left {
    width: 8px;
    height: 32px;
    background: #3CBDD0;
    border-radius: 2px;
    margin-right: 16px;
  }

  &-center {
    font-size: 32px;
    font-weight: 400;
    color: #000000;
    line-height: 28px;
  }

  &-right {
    position: absolute;
    right: 0;

    &-num {
      font-size: 36px;
      font-weight: normal;
      color: #3CBDD0;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

.sociology-population-chart {
  width: 100%;
  height: 442px;
  margin-top: 48px;
}

.organization-population {
  width: 92.5%;
  height: 92px;
  padding: 32px 0;
  margin: 0 32px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  position: relative;

  &-left {
    width: 8px;
    height: 32px;
    background: #37C2BB;
    border-radius: 2px;
    margin-right: 16px;
  }

  &-center {
    font-size: 32px;
    font-weight: 400;
    color: #000000;
    line-height: 28px;
  }

  &-right {
    position: absolute;
    right: 0;

    &-num {
      font-size: 36px;
      font-weight: normal;
      color: #37C2BB;
      line-height: 28px;
      font-family: 'iconfont';
    }
  }
}

.interlayer {
  width: 100%;
  height: 16px;
  background: #F6F6F6;
}

.origin-population-chart {
  width: 100%;
  height: 650px;
  padding-bottom: 32px;
}

.radar-population-chart {
  width: 100%;
  height: 470px;
  margin: 34px 0px;
}

.actual-population-chart {
  width: 100%;
  height: 450px;
}

.overtime-population {
  width: 92.5%;
  margin: 32px;
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 32px;
  position: relative;

  &-text {
    font-size: 28px;
    font-weight: 400;
    color: #292A2D;
    line-height: 55px;
    margin-left: 32px;
  }

  &-num {
    line-height: 55px;
    position: absolute;
    right: 0;
    font-family: 'iconfont';

    &-value {
      font-size: 28px;
      font-weight: bold;
      color: #E25656;
      line-height: 55px;
    }
  }
}

.average-population {
  width: 92.5%;
  margin: 32px;
  display: flex;
  position: relative;

  &-text {
    font-size: 28px;
    font-weight: 400;
    color: #292A2D;
    line-height: 55px;
    margin-left: 32px;
  }

  &-num {
    line-height: 55px;
    position: absolute;
    right: 0;
    font-family: 'iconfont';

    &-value {
      font-size: 28px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #37C2BB;
      line-height: 55px;
    }
  }
}

.overview-population {
  width: 100%;
  height: 258px;
}

.overview-population-static {
  display: flex;

  &-item {
    width: 33.33%;
    margin-left: 42px;
    margin-top: 0px;
    margin-bottom: 42px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);

    &-num1 {
      width: 72%;
      font-size: 40px;
      font-family: 'iconfont';
      font-weight: normal;
      color: #E28556;
      line-height: 32px;
      text-align: center;
      margin-bottom: 16px;
    }

    &-num2 {
      width: 72%;
      font-size: 40px;
      font-family: 'iconfont';
      font-weight: normal;
      color: #E2AB56;
      line-height: 32px;
      text-align: center;
      margin-bottom: 16px;
    }
  }

  &-item1 {
    width: 33.33%;
    padding: 42px;
    padding-top: 0px;

    &-num1 {
      width: 72%;
      font-size: 40px;
      font-family: 'iconfont';
      font-weight: normal;
      color: #3CBDD0;
      line-height: 32px;
      text-align: center;
      margin-bottom: 16px;
    }
  }
}

.organization-total {
  width: 92.5%;
  padding: 20px 32px;
}

.page {
  overflow-x: hidden;
}